<template>
  <div class="home-title whov" :class="topNumber > 0 ? 'title-theme' : ''">
    <div class="title-main whov" :class="{ title_main_m: isMobile() }">
      <div class="title-content">
        <div
          v-for="(item, index) in dataList"
          @click="onClick(item)"
          :key="index"
          class="title-service cup line_height_40"
          :class="isMobile() ? 'font_12' : 'font_18'"
          >{{ item.label }}</div
        >
      </div>
      <div class="title-base-info line_height_40" :class="isMobile() ? 'font_12' : 'font_16'">
        <span v-for="(item, index) in anguageList" :key="index" :class="{ active_language: item == activeLanguageStr }">
          {{ item }}
          <span v-if="index < anguageList.length - 1">/</span>
        </span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, defineProps, computed, PropType } from 'vue'
  import { isMobile } from '@/utils'
  const props = defineProps({
    scrollTop: {
      type: Number as PropType<number>,
      require: true,
      default: () => 0,
    },
  })
  const topNumber = computed(() => props.scrollTop)
  const dataList = ref<{ label: string; value: string }[]>([
    { label: '首页', value: 'brand' },
    { label: '平台介绍', value: 'brand' },
    { label: '关于最车', value: 'introduction' },
    { label: '联系我们', value: 'phone' },
  ])
  const anguageList = ref<string[]>(['中文', 'EN'])
  const activeLanguageStr = ref('中文')
  const onClick = (data: { label: string; value: string }) => {
    const target = document.getElementById(`home_${data.value}`)
    if (target) {
      target.scrollIntoView({ behavior: 'smooth', block: 'start' })
    }
  }
</script>
<style scoped lang="less">
  .home-title.title-theme {
    background-color: rgba(0, 0, 0, 0.85);
    color: #ffffff;
  }
  .home-title {
    position: fixed;
    height: auto;
    transition: background-color 0.5s ease;
    z-index: 999;

    .title-main {
      display: flex;
      justify-content: space-between;
      font-weight: 600;
      z-index: 99999999;
      padding: 10px 261px;
      .title-content {
        .title-service {
          display: inline-block;
          margin: 0 24px;
          color: @font-basic-color_hover;
          transition: color 0.5s ease;
        }
        .title-service:hover {
          color: rgba(31, 114, 252, 1);
        }
      }
      .title-base-info {
        width: auto;
        text-align: right;
      }
    }
    .title_main_m {
      padding: 0;
      .title-service {
        margin: 0 30px !important;
      }
      .title-base-info {
        margin-right: 10px;
      }
    }
  }
  .active_language {
    color: @font-basic-color_hover;
  }
  // @media (max-width: 768px) {
  //   .title-base-info {
  //     width: 6.25vw !important;
  //   }
  // }
</style>
